<template>
  <div id="systemStability" class="card">
    <h1>系统稳定性监控</h1>
    <div id="char"></div>
    <div id="text">
      {{
        normalStaticCount / allStaticCount > 0.7
          ? "系统整体运行状态良好"
          : normalStaticCount / allStaticCount > 0.5
          ? "系统稳定性一般,请检查日志！"
          : "系统稳定性不佳,请进行维护！"
      }}
    </div>
  </div>
</template>
    
<script>
import * as echarts from "echarts";
import axios from "axios";
import { baseUrl } from "../../main.js";
import { show_error_msg } from "../../js/msg.js";
export default {
  data() {
    return {
      baseUrl: baseUrl,
      stabilityData: [],
      normalStaticCount: 0,
      allStaticCount: 0,
      levelMapper: {
        DEBUG: "正常",
        INFO: "正常",
        WARN: "警告",
        ERROR: "错误",
      },
      colorMapper: {
        DEBUG: "#5DADE2",
        INFO: "#5DADE2",
        WARN: "#F5B041",
        ERROR: "#C0392B",
      },
    };
  },
  methods: {
    getStabilityData() {
      axios.get(this.baseUrl + "/log/getSystemStability").then((response) => {
        let reData = response.data;
        if (reData.status != 200) {
          show_error_msg("获取系统稳定性时发生错误");
          return;
        }
        for (let v of reData.data) {
          if (v.level === "INFO" || v.level === "DEBUG") {
            this.normalStaticCount += v.count;
          }
          this.allStaticCount += v.count;
          this.stabilityData.push({
            name: this.levelMapper[v.level],
            value: v.count,
            itemStyle: { color: this.colorMapper[v.level] },
          });
        }
        this.showChar();
      });
    },
    showChar() {
      var chartDom = document.getElementById("char");
      var myChart = echarts.init(chartDom);
      let options = {
        tooltip: {
          trigger: "item",
          formatter: "{b}: {d}%",
        },
        legend: {
          orient: 'vertical',
          top: "3%",
          left: "right",
        },
        series: {
          type: "pie",
          radius: ["45%", "75%"],
          data: this.stabilityData,
          padAngle: 8,
          itemStyle: {
            borderRadius: 10,
            shadowBlur: 20,
            shadowColor: "rgba(25, 44, 68, 0.3)",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 25,
              fontWeight: "bold",
            },
          },
        },
      };
      myChart.setOption(options);
    },
  },
  mounted() {
    this.getStabilityData();
  },
};
</script>
    
<style scoped>
h1 {
  font-size: 3vh;
}
#systemStability {
  height: 51vh;
  width: 27vw;
  padding: 20px;
}
#char {
  height: 78%;
  margin-top: 10px;
  /* background-color: aquamarine; */
}
#text {
  height: 10%;
  text-align: center;
  font-size: 2vh;
  padding-top: 3.5%;
  /* background-color: rgb(64, 40, 199); */
}
</style>